import { Component, OnInit } from '@angular/core';
import * as echarts from 'echarts/lib/echarts';
import { graphic, registerMap, EChartOption } from 'echarts';
@Component({
  selector: 'app-river-panel',
  templateUrl: './river-panel.component.html',
  styleUrls: ['./river-panel.component.scss']
})

export class RiverPanelComponent implements OnInit {
  colorList = [
    {
      c1: '#fce5ca',
      c2: '#FF9D62'
    },
    {
      c1: ' #508DFF',
      c2: '#26C5FE'
    },
    {
      c1: '#63E587',
      c2: '#5FE2E4'
    }];
  pieOpt1: any = {
    color: ['#168AFF', '#FFC107', '#D0E3FE', '#673AB7', '#8ABE78'],
    tooltip: {
      trigger: 'item',
      formatter: '{b}: {c} {d}%',
      backgroundColor: 'rgba(255,255,255,0.6)',
      textStyle: {
        color: '#748AA1',
        fontSize: 12
      }
    },
    legend: {
      icon: 'circle',
      type: 'scroll',
      orient: 'vertical',
      right: 10,
      top: 40,
      bottom: 20,
      textStyle: {
        color: '#fff'
      }
    },

    series: [
      {
        name: '',
        type: 'pie',
        radius: '70%',
        center: ['26%', '50%'],
        data: [
          { value: 35, name: '地下水资源可利用量' },
          { value: 28, name: '黄河地下水流量' },
          { value: 32, name: '高河耗水侧标' },
          { value: 30, name: '黄河地下水流量1' },
          { value: 26, name: '高河耗水侧标1' }
        ],
        roseType: 'radius',
        label: {
          show: false
        },
        itemStyle: {
          // tslint:disable-next-line:only-arrow-functions
          color: (params) => {
            const colorList = [
              {
                c1: '#56E8F2',
                c2: '#b2f5e3'
              },
              {
                c1: '#FFC107',
                c2: '#ffebd9'
              },
              {
                c1: '#F772D1',
                c2: '#ddc5f2'
              },
              {
                c1: '#00C0FA',
                c2: '#015EEA'
              },
              {
                c1: '#63be47',
                c2: '#afbeb5'
              },
            ];

            const arr = [
              {
                offset: 0,
                color: colorList[params.dataIndex % 5].c1
              },
              {
                offset: 1,
                color: colorList[params.dataIndex % 5].c2
              }
            ];

            return new graphic.LinearGradient(1, 0, 0, 0, arr);
          }
        },
        animationType: 'scale',
        animationEasing: 'elasticOut',
        animationDelay: () => {
          return Math.random() * 200;
        }
      }
    ]
  };
  pieOptChange1: any = {};
  pieOpt2: any = {
    color: ['#84F5DE', '#5284ea', '#9AFCC2', '#F772D1', '#8abe78'],
    tooltip: {
      trigger: 'item',
      formatter: '{b}: {c} {d}%',
      backgroundColor: 'rgba(255,255,255,0.6)',
      textStyle: {
        color: '#000000',
        fontSize: 12
      }
    },
    series: [
      {
        name: '',
        type: 'pie',
        radius: ['30%', '40%'],
        label: {
          formatter: '{b|{b}：}\n({c}亿m³) {per|{d}%}',
          rich: {
            b: {
              color: '#00BEFF',
              fontSize: 12,
              lineHeight: 18,
              align: 'center'
            },
            c: {
              color: '#4FACFE'
            },
            per: {
              color: '#0895DA'
            }
          }
        },
        data: [
          { value: 7.51, name: '黄河干流' },
          { value: 0.37, name: '地下水' },
          { value: 3.51, name: '非常规水' },
          { value: 1.51, name: '黄河支流' },
          { value: 3.51, name: '非常规水1' }
        ],
        animationType: 'scale',
        animationEasing: 'elasticOut',
        animationDelay: () => {
          return Math.random() * 200;
        }
      }
    ]
  };
  pieOptChange2: any = {};
  pieOpt3: any = {
    color: ['#168AFF', '#FFC107', '#D0E3FE', '#673AB7', '#8ABE78'],
    tooltip: {
      trigger: 'item',
      formatter: '{b}: {c} {d}%',
      backgroundColor: 'rgba(255,255,255,0.6)',
      textStyle: {
        color: '#748AA1',
        fontSize: 12
      }
    },
    legend: {
      icon: 'circle',
      type: 'scroll',
      orient: 'vertical',
      right: 50,
      top: 60,
      bottom: 20
    },

    series: [
      {
        name: '',
        type: 'pie',
        radius: '70%',
        center: ['30%', '50%'],
        data: [
          { value: 38, name: '农业' },
          { value: 44, name: '工业' },
          { value: 12, name: '城镇生活' },
          { value: 6, name: '农村人畜' }
        ],
        roseType: 'radius',
        label: {
          show: false
        },
        animationType: 'scale',
        animationEasing: 'elasticOut',
        animationDelay: () => {
          return Math.random() * 200;
        }
      }
    ]
  };
  pieOptChange3: any = {};

  constructor() { }

  ngOnInit(): void {
  }

}
